<template>
    <div>
    <div :class="[{'animate':moveflag}]" class='buy' v-if="$store.state.buyflag">
        <div class="title">
             <span @click="xx" class='close'>×</span>
            <h5 class='titleinfo'>【电子票快速入园】遇龙河漂流(金龙桥—旧县)双人票</h5>
            <p class='titleprice'><span class='fuhao'>￥</span><span class='price'>50</span> <span class='zhang'>/张</span></p>
        </div>
        <div class="price-data">
            <p style="padding-left:0.1rem;">价格日历{{this.$store.getters.foo}}</p>
            <ul>
                <li  @click="fg=i" :class="[{'now':fg==i}]" v-for="(item,i) in day" :key="item.id">
                    <span>{{ item.day }}</span><br>
                    <span class='day'>11月24日</span>
                </li>
               
                <li class='else'>其他日期</li>
            </ul>
            <p class='tips'>需要在游玩当天16：00前预定</p>
        </div>
        <div>
            <router-link to="/money" tag="button" class='rightnow'>立即预定</router-link>
        </div>
    </div>
   </div> 
</template>


<script>
    export default{
        props: ['sonitem'],
        data(){
            return{
                fg:0,
                moveflag:false,
                day:[
                    {id:'3001',day:'今天'},
                    {id:'3002',day:'明天'},
                    {id:'3003',day:'后天'},
                ]
            }
        },      
        methods: {
          xx(){
            this.$store.commit('changbuyflag',false)
               
            }   
        },
        computed:{
            buyflag(){
                 return this.$store.state.buyflag
            }
        },
        mounted () {
               console.log(this.sonitem)
        },
        watch: {
            sonitem(){
                if(this.sonitem){
                    this.moveflag=true
                }
            }
               
        }
        
        }
</script>


<style lang="scss" scoped>
@import '../../css/sass/common.scss';
.animate{
    animation: move 1s linear forwards;
}
.now{
    background-color: skyblue;
}
.buy{
    position: fixed;
    bottom: -8rem;
    left: 0;
    background-color: #fff;
    z-index: 100;
    .title{
        .close{
            display: block;
           width: 97%;
           text-align: right;
           height: 0.2rem;
           line-height: 0.4rem;
           font-size: 0.38rem;
          
        }
        .titleinfo{
             padding: 0.2rem 0;
            
            font-size: 0.4rem;
        }
        .titleprice{
            line-height: 0.4rem;
            height: 0.4rem;;
            padding-left: 0.1rem;
            .fuhao{
                color: #ffb038;
                 font-size: 0.2rem;
            }
            .price{
                color: #ffb038;
                font-size: 0.36rem;
            }
            .zhang{
                 font-size: 0.2rem;
                 color: #f8f8f8;
            }

        }
       
    }
    .price-data{
        display: flex;
        flex-direction: column;
        padding: 0.2rem 0;
        ul{
            padding-top: 0.2rem;
            display: flex;
            width: 100%;
            li{
               padding: 0.2rem;
                width: 23%;
                text-align: center;
                border: 1px solid yellowgreen;
                .day{
                    font-size: 0.2rem;
                }
            }
            .else{
                  padding: 0.25rem 0.2rem;;
            }
        }
        .tips{
            padding: 0.2rem .2rem 0 .2rem;
            font-size: 0.26rem;
             color: #ffb038;
        }
    }
    .rightnow{
        width: 100%;
         background-color: #ffb038;
          height: 1rem;
             line-height: 1rem;
             font-size: 0.48rem;
             color: #fff;
    }
}

@keyframes move{
    0%{
        
    }
    100%{
       bottom: 0;
    }
}
</style>

